<template>
  <!-- antv x6图形引擎 -->
  <div class="antv-x6">

    <div class="header">
      <el-button size="small" @click="initData"> 初始化数据 </el-button>
      <el-button size="small" type="primary" @click="getData"> 保存 </el-button>
    </div>

    <!-- 流程图容器 -->
    <div id="container" />

    <!-- 表单操作 -->
    <el-drawer
      :visible.sync="drawerVisible"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="节点名称" prop="labelName">
          <el-input v-model="form.labelName" />
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="submitForm('form')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
import { Selection } from '@antv/x6-plugin-selection'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { History } from '@antv/x6-plugin-history'
export default {
  name: 'AntvX6',

  data () {
    return {
      form: {
        labelName: ''
      },
      rules: {
        labelName: [
          { required: true, message: '请输入节点名称', trigger: 'blur' }
        ]
      },
      drawerVisible: false,
      graph: null,
      cell: null,
      cellData: {
        "cells": [
            {
                "shape": "edge",
                "attrs": {
                    "line": {
                        "stroke": "#A2B1C3",
                        "targetMarker": {
                            "name": "block",
                            "width": 12,
                            "height": 8
                        }
                    }
                },
                "id": "70abb1e7-c356-4695-b0c1-317b44ea8b9f",
                "zIndex": 0,
                "source": {
                    "cell": "1910ea69-5f7c-4e0a-bebb-ff4dfd6db82a",
                    "port": "51c50a5b-7429-4eaa-be8d-b2c5ca7f6dc2"
                },
                "target": {
                    "cell": "be14372f-1a0a-41d7-bd41-1cea99c20401",
                    "port": "1eaf3c25-89ef-4312-85ee-c72baa66ba29"
                }
            },
            {
                "shape": "edge",
                "attrs": {
                    "line": {
                        "stroke": "#A2B1C3",
                        "targetMarker": {
                            "name": "block",
                            "width": 12,
                            "height": 8
                        }
                    }
                },
                "id": "fa6b7d98-ef33-4565-b1da-a62e0b3a7c2c",
                "zIndex": 0,
                "source": {
                    "cell": "be14372f-1a0a-41d7-bd41-1cea99c20401",
                    "port": "d45236fb-7b05-4d22-9a7e-ec5da4521158"
                },
                "target": {
                    "cell": "dec57d66-f800-4335-a6dc-6ba62f6b1a90",
                    "port": "a8bd59d7-99f3-41ff-9794-c7857b26f3a1"
                }
            },
            {
                "shape": "edge",
                "attrs": {
                    "line": {
                        "stroke": "#A2B1C3",
                        "targetMarker": {
                            "name": "block",
                            "width": 12,
                            "height": 8
                        }
                    }
                },
                "id": "080b4d6d-3bf5-4a03-9481-07d5357e914e",
                "zIndex": 0,
                "source": {
                    "cell": "dec57d66-f800-4335-a6dc-6ba62f6b1a90",
                    "port": "47193b26-be41-481a-bbfc-4a909f3a41b4"
                },
                "target": {
                    "cell": "2428d389-943f-423c-b908-a57490ccdb2c",
                    "port": "affe2795-f5de-44fa-a7cc-e58d65793511"
                }
            },
            {
                "shape": "edge",
                "attrs": {
                    "line": {
                        "stroke": "#A2B1C3",
                        "targetMarker": {
                            "name": "block",
                            "width": 12,
                            "height": 8
                        }
                    }
                },
                "id": "39d250c6-ef24-46b8-bc34-63e2922d7e4d",
                "zIndex": 0,
                "source": {
                    "cell": "2428d389-943f-423c-b908-a57490ccdb2c",
                    "port": "6b867d50-6a50-4a0b-9b4f-8bcd69e3dc6d"
                },
                "target": {
                    "cell": "4732bf16-bb1f-4fe7-9ca9-c4ae24a5d07a",
                    "port": "55c26b67-2dc1-4afe-a80f-51709fdfe6c8"
                }
            },
            {
                "shape": "edge",
                "attrs": {
                    "line": {
                        "stroke": "#A2B1C3",
                        "targetMarker": {
                            "name": "block",
                            "width": 12,
                            "height": 8
                        }
                    }
                },
                "id": "1f8229ac-ecfe-4900-acfe-293b1fde5262",
                "zIndex": 0,
                "source": {
                    "cell": "4732bf16-bb1f-4fe7-9ca9-c4ae24a5d07a",
                    "port": "fa307e9b-56ee-45a0-8adc-bfd8e6a3d74c"
                },
                "target": {
                    "cell": "39506dcb-01a1-40cf-901f-1c5e87f9b0db",
                    "port": "fbd9a66d-6c18-4404-90b1-5e55e485d83a"
                }
            },
            {
                "shape": "edge",
                "attrs": {
                    "line": {
                        "stroke": "#A2B1C3",
                        "targetMarker": {
                            "name": "block",
                            "width": 12,
                            "height": 8
                        }
                    }
                },
                "id": "15098bf3-5b06-4343-93fe-1f5f65dc0545",
                "zIndex": 0,
                "source": {
                    "cell": "39506dcb-01a1-40cf-901f-1c5e87f9b0db",
                    "port": "fdd0323c-1e54-4fdf-b0ff-dc51881fd361"
                },
                "target": {
                    "cell": "89b99287-ec2a-4f40-b321-2218d2894d50",
                    "port": "dec99264-badd-4cdb-a380-4a97999f9029"
                }
            },
            {
                "shape": "edge",
                "attrs": {
                    "line": {
                        "stroke": "#A2B1C3",
                        "targetMarker": {
                            "name": "block",
                            "width": 12,
                            "height": 8
                        }
                    }
                },
                "id": "3c480104-2097-41e6-9c01-402869f450de",
                "zIndex": 0,
                "source": {
                    "cell": "89b99287-ec2a-4f40-b321-2218d2894d50",
                    "port": "c4a60cd9-ec07-40dd-9193-09a6cdf1f9aa"
                },
                "target": {
                    "cell": "502f516d-a120-46be-aed9-e1ea36e30010",
                    "port": "df130163-3d39-433d-b68c-519bf31f37db"
                }
            },
            {
                "position": {
                    "x": 220,
                    "y": 80
                },
                "size": {
                    "width": 86,
                    "height": 46
                },
                "attrs": {
                    "text": {
                        "text": "开始"
                    },
                    "body": {
                        "rx": 6,
                        "ry": 6
                    }
                },
                "visible": true,
                "shape": "custom-rect",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "96dc4536-1b86-4d8d-b96d-06b42dfef665"
                        },
                        {
                            "group": "right",
                            "id": "0286ac46-55ad-47cd-8711-876244af4a8c"
                        },
                        {
                            "group": "bottom",
                            "id": "51c50a5b-7429-4eaa-be8d-b2c5ca7f6dc2"
                        },
                        {
                            "group": "left",
                            "id": "9b15e696-522b-44a5-9451-f092a60d994f"
                        }
                    ]
                },
                "id": "1910ea69-5f7c-4e0a-bebb-ff4dfd6db82a",
                "zIndex": 1
            },
            {
                "position": {
                    "x": 740,
                    "y": 409.5
                },
                "size": {
                    "width": 86,
                    "height": 46
                },
                "attrs": {
                    "text": {
                        "text": "结束"
                    },
                    "body": {
                        "rx": 6,
                        "ry": 6
                    }
                },
                "visible": true,
                "shape": "custom-rect",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "de63028e-db0d-414f-9376-232dde59b24f"
                        },
                        {
                            "group": "right",
                            "id": "f1de7a1c-6c32-41af-998d-23aeb34c925f"
                        },
                        {
                            "group": "bottom",
                            "id": "4b2d6b49-fb25-4dea-8333-53d5378d09c2"
                        },
                        {
                            "group": "left",
                            "id": "df130163-3d39-433d-b68c-519bf31f37db"
                        }
                    ]
                },
                "id": "502f516d-a120-46be-aed9-e1ea36e30010",
                "zIndex": 2
            },
            {
                "position": {
                    "x": 230.5,
                    "y": 167
                },
                "size": {
                    "width": 65,
                    "height": 65
                },
                "attrs": {
                    "text": {
                        "text": "提供方服务"
                    }
                },
                "visible": true,
                "shape": "custom-circle",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "1eaf3c25-89ef-4312-85ee-c72baa66ba29"
                        },
                        {
                            "group": "right",
                            "id": "eb296257-07df-4323-bd82-53dc9493f788"
                        },
                        {
                            "group": "bottom",
                            "id": "d45236fb-7b05-4d22-9a7e-ec5da4521158"
                        },
                        {
                            "group": "left",
                            "id": "9f7c7f7f-1502-4fa6-ba84-c437325424ea"
                        }
                    ]
                },
                "id": "be14372f-1a0a-41d7-bd41-1cea99c20401",
                "zIndex": 3
            },
            {
                "position": {
                    "x": 230.5,
                    "y": 285
                },
                "size": {
                    "width": 65,
                    "height": 65
                },
                "attrs": {
                    "text": {
                        "text": "加解密配置"
                    }
                },
                "visible": true,
                "shape": "custom-circle",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "a8bd59d7-99f3-41ff-9794-c7857b26f3a1"
                        },
                        {
                            "group": "right",
                            "id": "8dd26e4c-fdd7-4aaa-9b38-4e279da1b5e9"
                        },
                        {
                            "group": "bottom",
                            "id": "47193b26-be41-481a-bbfc-4a909f3a41b4"
                        },
                        {
                            "group": "left",
                            "id": "99336efb-8f2e-4d2c-87d4-3c8ccd2ebd1d"
                        }
                    ]
                },
                "id": "dec57d66-f800-4335-a6dc-6ba62f6b1a90",
                "zIndex": 4
            },
            {
                "position": {
                    "x": 230.5,
                    "y": 400
                },
                "size": {
                    "width": 65,
                    "height": 65
                },
                "attrs": {
                    "text": {
                        "text": "协议转换"
                    }
                },
                "visible": true,
                "shape": "custom-circle",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "affe2795-f5de-44fa-a7cc-e58d65793511"
                        },
                        {
                            "group": "right",
                            "id": "6b867d50-6a50-4a0b-9b4f-8bcd69e3dc6d"
                        },
                        {
                            "group": "bottom",
                            "id": "b15f15e5-e454-4e20-ac0d-b4b9be5780f1"
                        },
                        {
                            "group": "left",
                            "id": "8cfcc279-3fe3-46be-9d05-ee51ea34e025"
                        }
                    ]
                },
                "id": "2428d389-943f-423c-b908-a57490ccdb2c",
                "zIndex": 5
            },
            {
                "position": {
                    "x": 350,
                    "y": 400
                },
                "size": {
                    "width": 65,
                    "height": 65
                },
                "attrs": {
                    "text": {
                        "text": "数据映射"
                    }
                },
                "visible": true,
                "shape": "custom-circle",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "cd8aedfb-d194-4553-9b96-82b76120b22d"
                        },
                        {
                            "group": "right",
                            "id": "fa307e9b-56ee-45a0-8adc-bfd8e6a3d74c"
                        },
                        {
                            "group": "bottom",
                            "id": "8ea0fa89-0a5a-45b5-a6e8-43f39c7e76e4"
                        },
                        {
                            "group": "left",
                            "id": "55c26b67-2dc1-4afe-a80f-51709fdfe6c8"
                        }
                    ]
                },
                "id": "4732bf16-bb1f-4fe7-9ca9-c4ae24a5d07a",
                "zIndex": 6
            },
            {
                "position": {
                    "x": 482,
                    "y": 400
                },
                "size": {
                    "width": 65,
                    "height": 65
                },
                "attrs": {
                    "text": {
                        "text": "队列配置"
                    }
                },
                "visible": true,
                "shape": "custom-circle",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "01909ff9-9e54-4848-96ea-c81eae0c6ffe"
                        },
                        {
                            "group": "right",
                            "id": "fdd0323c-1e54-4fdf-b0ff-dc51881fd361"
                        },
                        {
                            "group": "bottom",
                            "id": "34362055-fc8b-43be-9ca3-94dd067c964a"
                        },
                        {
                            "group": "left",
                            "id": "fbd9a66d-6c18-4404-90b1-5e55e485d83a"
                        }
                    ]
                },
                "id": "39506dcb-01a1-40cf-901f-1c5e87f9b0db",
                "zIndex": 7
            },
            {
                "position": {
                    "x": 607,
                    "y": 400
                },
                "size": {
                    "width": 65,
                    "height": 65
                },
                "attrs": {
                    "text": {
                        "text": "请求方服务"
                    }
                },
                "visible": true,
                "shape": "custom-circle",
                "ports": {
                    "groups": {
                        "top": {
                            "position": "top",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "right": {
                            "position": "right",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "bottom": {
                            "position": "bottom",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        },
                        "left": {
                            "position": "left",
                            "attrs": {
                                "circle": {
                                    "r": 4,
                                    "magnet": true,
                                    "stroke": "#5F95FF",
                                    "strokeWidth": 1,
                                    "fill": "#fff",
                                    "style": {
                                        "visibility": "hidden"
                                    }
                                }
                            }
                        }
                    },
                    "items": [
                        {
                            "group": "top",
                            "id": "d0cd064d-6f41-48ea-aa1a-e09c8db73202"
                        },
                        {
                            "group": "right",
                            "id": "c4a60cd9-ec07-40dd-9193-09a6cdf1f9aa"
                        },
                        {
                            "group": "bottom",
                            "id": "b29d4c65-9b95-48e9-8525-c58d59bd9e10"
                        },
                        {
                            "group": "left",
                            "id": "dec99264-badd-4cdb-a380-4a97999f9029"
                        }
                    ]
                },
                "id": "89b99287-ec2a-4f40-b321-2218d2894d50",
                "zIndex": 8
            }
        ]
      }
    }
  },

  mounted () {
    this.preWork()

    this.graph.on('cell:dblclick', ({ e, x, y, cell, view }) => {
      this.cell = cell
      this.drawerVisible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    })
  },

  methods: {

    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.drawerVisible = false

          if (this.cell.isNode()) {
            // 节点
            this.cell.attr({
              label: {
                text: this.form.labelName,
                customData: 'customData'
              }
            })
          } else {
            // 连线
            this.cell.setLabels([{
              attrs: {
                label: { text: this.form.labelName }
              }
            }])
          }
        }
      })
    },

    // 初始化数据
    initData () {
      // fromJSON - 按照指定的 JSON 数据渲染节点和边
      this.graph.fromJSON(this.cellData)
    },

    // 获取所有数据
    getData () {
      // toJSON - 导出图中的节点和边，返回一个具有 { cells: [] } 结构的对象，其中 cells 数组按渲染顺序保存节点和边。
      console.log(this.graph.toJSON())
    },

    // 初始化
    preWork () {
      const container = document.getElementById('container')
      const stencilContainer = document.createElement('div')
      stencilContainer.id = 'stencil'
      const graphContainer = document.createElement('div')
      graphContainer.id = 'graph-container'
      container.appendChild(stencilContainer)
      container.appendChild(graphContainer)

      this.createTool()
    },

    // 创建工具
    createTool () {
      // #region 初始化画布
      this.graph = new Graph({
        container: document.getElementById('graph-container'),
        grid: true,
        panning: true,
        interacting: true,
        mousewheel: {
          enabled: true,
          zoomAtMousePosition: true,
          modifiers: 'ctrl',
          minScale: 0.5,
          maxScale: 3
        },
        connecting: {
          router: 'manhattan',
          connector: {
            name: 'rounded',
            args: {
              radius: 8
            }
          },
          anchor: 'center',
          connectionPoint: 'anchor',
          allowBlank: false,
          snap: {
            radius: 20
          },
          createEdge() {
            return new Shape.Edge({
              attrs: {
                line: {
                  stroke: '#A2B1C3',
                  strokeWidth: 2,
                  targetMarker: {
                    name: 'block',
                    width: 12,
                    height: 8
                  }
                }
              },
              zIndex: 0
            })
          },
          validateConnection({ targetMagnet }) {
            return !!targetMagnet
          }
        },
        highlighting: {
          magnetAdsorbed: {
            name: 'stroke',
            args: {
              attrs: {
                fill: '#5F95FF',
                stroke: '#5F95FF'
              }
            }
          }
        }
      })

      // #region 使用插件
      this.graph
        .use(
          new Transform({
            resizing: true,
            rotating: true
          })
        )
        .use(
          new Selection({
            rubberband: false,
            showNodeSelectionBox: true
          })
        )
        .use(new Snapline())
        .use(new Keyboard())
        .use(new Clipboard())
        .use(new History())

      // #region 初始化 stencil
      const stencil = new Stencil({
        title: '组件配置',
        target: this.graph,
        stencilGraphWidth: 800,
        stencilGraphHeight: 80,
        collapsable: false,
        groups: [
          {
            title: '基础流程图',
            name: 'group1'
          }
        ],
        layoutOptions: {
          columns: 8,
          columnWidth: 100,
          rowHeight: 55
        }
      })
      document.getElementById('stencil').appendChild(stencil.container)

      // #region 快捷键与事件
      this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.copy(cells)
        }
        return false
      })
      this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.cut(cells)
        }
        return false
      })
      this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
        if (!this.graph.isClipboardEmpty()) {
          const cells = this.graph.paste({ offset: 32 })
          this.graph.cleanSelection()
          this.graph.select(cells)
        }
        return false
      })

      // undo redo
      this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
        if (this.graph.canUndo()) {
          this.graph.undo()
        }
        return false
      })
      this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
        if (this.graph.canRedo()) {
          this.graph.redo()
        }
        return false
      })

      // select all
      // this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
      //   const nodes = this.graph.getNodes()
      //   if (nodes) {
      //     this.graph.select(nodes)
      //   }
      // })

      // delete
      this.graph.bindKey('delete', () => {
        const cells = this.graph.getSelectedCells()
        if (cells.length) {
          this.graph.removeCells(cells)
        }
      })

      // zoom
      this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
        const zoom = this.graph.zoom()
        if (zoom < 1.5) {
          this.graph.zoom(0.1)
        }
      })
      this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
        const zoom = this.graph.zoom()
        if (zoom > 0.5) {
          this.graph.zoom(-0.1)
        }
      })

      // 控制连接桩显示/隐藏
      const showPorts = (ports, show) => {
        for (let i = 0, len = ports.length; i < len; i += 1) {
          ports[i].style.visibility = show ? 'visible' : 'hidden'
        }
      }
      this.graph.on('node:mouseenter', () => {
        const container = document.getElementById('graph-container')
        const ports = container.querySelectorAll(
          '.x6-port-body'
        )
        showPorts(ports, true)
      })
      this.graph.on('node:mouseleave', () => {
        const container = document.getElementById('graph-container')
        const ports = container.querySelectorAll(
          '.x6-port-body'
        )
        showPorts(ports, false)
      })

      // #region 初始化图形
      const ports = {
        groups: {
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden'
                }
              }
            }
          },
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden'
                }
              }
            }
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden'
                }
              }
            }
          },
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 4,
                magnet: true,
                stroke: '#5F95FF',
                strokeWidth: 1,
                fill: '#fff',
                style: {
                  visibility: 'hidden'
                }
              }
            }
          }
        },
        items: [
          {
            group: 'top'
          },
          {
            group: 'right'
          },
          {
            group: 'bottom'
          },
          {
            group: 'left'
          }
        ]
      }

      Graph.registerNode(
        'custom-rect',
        {
          inherit: 'rect',
          width: 86,
          height: 46,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF'
            },
            text: {
              fontSize: 12,
              fill: '#262626'
            }
          },
          ports: { ...ports }
        },
        true
      )
      Graph.registerNode(
        'custom-circle',
        {
          inherit: 'circle',
          width: 65,
          height: 65,
          attrs: {
            body: {
              strokeWidth: 1,
              stroke: '#5F95FF',
              fill: '#EFF4FF'
            },
            text: {
              fontSize: 12,
              fill: '#262626'
            }
          },
          ports: { ...ports }
        },
        true
      )

      // 基础流程图-group1
      const r1 = this.graph.createNode({
        shape: 'custom-rect',
        attrs: {
          body: {
            rx: 6,
            ry: 6
          }
        },
        label: '开始'
      })

      const r2 = this.graph.createNode({
        shape: 'custom-rect',
        attrs: {
          body: {
            rx: 6,
            ry: 6
          }
        },
        label: '结束'
      })
      const r3 = this.graph.createNode({
        shape: 'custom-circle',
        attrs: {
          text: {
            customData: 'customData'
          }
        },
        label: '请求方服务'
      })
      const r4 = this.graph.createNode({
        shape: 'custom-circle',
        label: '提供方服务'
      })
      const r5 = this.graph.createNode({
        shape: 'custom-circle',
        label: '协议转换'
      })
      const r6 = this.graph.createNode({
        shape: 'custom-circle',
        label: '数据映射'
      })
      const r7 = this.graph.createNode({
        shape: 'custom-circle',
        label: '队列配置'
      })
      const r8 = this.graph.createNode({
        shape: 'custom-circle',
        label: '加解密配置'
      })
      stencil.load([r1, r2, r3, r3, r4, r5, r6, r7, r8], 'group1')
    }
  }
}
</script>

<style lang="scss">
  .antv-x6 {
    width: 100vw;
    height: 100vh;

    .header {
      text-align: right;
      padding: 10px;
    }

    #container {
      border: 1px solid #dfe3e8;
      height: calc(100% - 52px);
      overflow-y: auto;
    }
    #stencil {
      width: 100%;
      height: 120px;
      position: relative;
      border-right: 1px solid #dfe3e8;
    }
    #graph-container {
      width: 100%;
      height: calc(100% - 172px);
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #fff !important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
      padding: 0px;
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div {
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div:hover {
      background-color: #3dafe4;
    }
    .x6-widget-transform-active-handle {
      background-color: #3dafe4;
    }
    .x6-widget-transform-resize {
      border-radius: 0;
    }
    .x6-widget-selection-inner {
      border: 1px solid #239edd;
    }
    .x6-widget-selection-box {
      opacity: 0;
    }
  }
</style>